<template>
  <div>
    <div style="text-align: right;">
    <div class="title" style="display: inline-block;">{{ formlist.bizOrgName }}配电室{{ formlist.date }}日用电量统计（kWh）</div>
    <div style="display: inline-block;width:35%;" class="tabbar">
      <button type="primary" size="small" @click="daochu" class="button daochu" style=" cursor: pointer;"><i class="el-icon-upload2" >导出</i></button>
      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
        <span style=" cursor: pointer;" @click="shuaxin"><i class="el-icon-refresh-right"></i></span>
      </el-tooltip>
      <el-dropdown trigger="click" @command="command">
      <span class="el-dropdown-link">
        <el-tooltip class="item" effect="dark" content="密度" placement="top">
        <span style=" cursor: pointer;"><i class="el-icon-d-caret"></i></span>
      </el-tooltip>
      </span>
      <el-dropdown-menu slot="dropdown" >
        <el-dropdown-item command="默认">默认</el-dropdown-item>
        <el-dropdown-item command="中等">中等</el-dropdown-item>
        <el-dropdown-item command="紧凑">紧凑</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
      <!-- <el-tooltip class="item" effect="dark" content="列设置" placement="top">
        <span><i class="el-icon-setting"></i></span>
      </el-tooltip> -->
    </div>
  </div>
    <div>
      <template>
        <el-table
          :data="tablechao2"
          style="width: 100%"
          v-loading="loading"
            border
            id="exportTable"
            :size="iissize"
            :header-cell-style="{'text-align':'center',background:'#f5f5f5'}"
          >
          <el-table-column
          fixed
            prop="devName"
            label="回路名称"
            sortable
            width="500">
          </el-table-column>
          <el-table-column
            prop="epowerYesterday"
            label="昨日电表数"
            align="right">
          </el-table-column>
          <el-table-column
            prop="epowerToday"
            label="今日电表数"
            align="right">
          </el-table-column>
          <el-table-column
            prop="ydl"
            label="日用电量"
            sortable
            align="right">
          </el-table-column>
        </el-table>
      </template>
    </div>
  </div>
</template>

<script>
import {postriyongapi} from '@/api/dayreport'
import { saveAs } from 'file-saver'
export default {
  name: 'ReportFormsRiyongdian',
  props: {
    tablechao2: {
      type: Array
    },
    formlist: {
      type: Object
    },
    form: {
      type: Object
    }
  },
  data () {
    return {
      tableData: [],
      iissize: 'medium',
      loading:false
    }
  },

  mounted () {
    console.log(this.formlist)
  },

  methods: {
    shuaxin () {
      this.$emit('shuaxin')
    },
    command (val) {
      if (val === '默认') {
        this.iissize = 'medium'
      } else if (val === '中等') {
        this.iissize = 'small'
      } else {
        this.iissize = 'mini'
      }
    },
    async daochu () {
      const res = await postriyongapi({ ...this.form,orgName:this.formlist.bizOrgName,switchroomName:this.formlist.switchroomId, isParams: true })
      const blobContent = new Blob([res])
      let url = window.URL.createObjectURL(blobContent)
      saveAs(url, '日用电量.xls')
    }
  }
}
</script>

<style lang="scss" scoped>
.tabbar{
  text-align: right;
}
.button{
  width: 62px;
  height: 32px;
}
.daochu{
  background-color: #1890ff;
  color: #fff;
  border: none;
  border-radius: 3px;
}
.tabbar span{
  margin: 0 10px;
  font-size: 20px;
}
.title{
  text-align: center;
  margin-bottom: 15px;
  font-size: 20px;
}
</style>
